<!DOCTYPE html>
<html lang="en">
<head>
    <title>银行卡账户管理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
        .leftFilter {
            float: left;
            text-align: left;
        }

        .clickable {
            color: #489EF1;;
            cursor: pointer;
            text-align: left;
            font-weight: bold;
        }
        .topDiv{
            text-align: right;
            position: absolute;
            width: 100%;
            background: #fff;
            top: 0;
            left: 0;
            padding: 15px 20px;
            padding-bottom: 5px;
        }
        .tableTitle{
            background-color: #d2e8fd;
            font-weight: bold;
            color:#333;
            text-align: center;
            height: 24px;
            line-height: 24px;
        }
        .lineBg{
            background-color: #d2e8fd !important;
        }
        .lineOne{
            text-align: center;
        }
        .lineOne span {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
        }
        .content {
            padding: 8px 8px 0 8px;
        }
    </style>
</head>
<body>
<section class="content" id="list">
    <div class="div-td-content-more"><i></i></div>
    <div style="padding-bottom: 10px; height: 35px;">
        <div class="leftFilter">
            <select class="form-control  queryCompanyIdSelect"  v-model="queryCompanyId" @change="query()" style="width: 190px;margin-right: 10px;height: 25px;line-height: 25px;padding: 0;
    font-size: 12px;">
                <option :value="item.companyId" v-for="(item,i) in companyList" >{{item.companyName}}</option>

            </select>
        </div>
        <div class="leftFilter">
            <select class="form-control  accountApplicationSelect"  v-model="accountApplication"  @change="query()" style="width: 190px;margin-right: 10px;height: 25px;line-height: 25px;padding: 0;
    font-size: 12px;">
                <option value="" selected="selected">账户用途</option>
                <option value="一般户" selected>一般户</option>
                <option value="基本户">基本户</option>
                <option value="保证金账户">保证金账户</option>
                <option value="贷款户">贷款户</option>
                <option value="外币户">外币户</option>
                <option value="个人户">个人户</option>
                <option value="POS机户">POS机户</option>
                <option value="专户">专户</option>
                <option value="支付宝账户">支付宝账户</option>
                <option value="微信账户">微信账户</option>
            </select>
        </div>
        <div class="leftFilter" >
            <select class="form-control  useStatusSelect"  v-model="useStatus"  @change="query()" style="width: 190px;margin-right: 10px;height: 25px;line-height: 25px;padding: 0;
    font-size: 12px;">
                <option value="" selected="selected">使用状态</option>
                <option value="1">使用中</option>
                <option value="0">停用</option>
            </select>
        </div>
        <button type="button" class="btn oaBtn btn-sm pull-left" style="margin-left: 10px;" @click="query()">查询</button>
        <button v-if="formReport==0" type="button" class="btn oaBtn btn-sm pull-right" style="margin-left: 10px;" @click="addAccount()">新增银行卡账户</button>
        <span class="pull-right" style="line-height: 25px;font-weight: bold" v-cloak>合计：{{fmoney(allPrice)}}</span>
    </div>
        <table class="table table-hover" style="margin: -1px 0">
            <thead>
            <tr>
                <!--<th style="width: 100px;text-align: center">公司名称</th>-->
                <th style="text-align: center;" class="tableTitle">银行名称</th>
                <th style="width: 150px;text-align: center" class="tableTitle">银行卡号</th>
                <th style="width: 80px;text-align: center" class="tableTitle">账户用途</th>
                <th style="width: 90px;text-align: center" class="tableTitle">余额</th>
                <th style="width: 80px;text-align: center" class="tableTitle">使用状态</th>
                <th v-if="formReport==0" style="width: 120px;text-align: center" class="tableTitle">操作</th>
            </tr>
            </thead>
            <tbody >
            <tr v-for="(item,i) in list" v-cloak>
                <!--<td rowspan="2" style="text-align: center">吉林清源</td>-->
                <td style="text-align: left" class="lineOne"><span>{{item.bankName}}</span></td>
                <td style="text-align: left">{{item.bankCard}}</td>
                <td style="text-align: center">{{item.account}}</td>
                <td style="text-align: right">{{fmoney(item.nowMoney)}}</td>
                <td style="text-align: center" v-if="item.useStatus==1">使用中</td>
                <td style="text-align: center;color:red;" v-else>停用</td>
                <td v-if="formReport==0" style="text-align: center;color: #169BD5">
                    <a style="color: #169BD5; cursor: pointer;"  @click="editAccount(item)">编辑</a>
                </td>
            </tr>


            </thead>
        </table>
    </div>
    <!-- /.box-body -->
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript" src="/dist/plugins/select2/select2.full.min.js"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script type="text/javascript">
    Vue.directive('select2', {
        inserted: function (el, binding, vnode) {
            var options = binding.value || {};

            $(el).select2(options).on("select2:select", function (e) {
                el.dispatchEvent(new Event('change', {target: e.target})); //说好的双向绑定，竟然不安套路
            });
        },
        update: function (el, binding, vnode) {
            $(el).trigger("change");
        }
    });
    var app = new Vue({
        el: '#list',
        data: {
            list: [],
            formReport:0,
            useStatus:"",
            accountApplication:"",
            allPrice:'',
            companyId:'',
            companyList:'',
            queryCompanyId:""
        },
        methods: {
            fmoney:function(s,n){
                n = n > 0 && n <= 20 ? n : 2;
                s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
                var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1],
                    t = "";
                for (i = 0; i < l.length; i++) {
                    t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
                }
                return t.split("").reverse().join("") + "." + r;
            },
            rmoney:function (s) {
                if (s == 0)
                    return 0;
                else
                    return parseFloat(s.replace(/[^\d\.-]/g, ""));
            },
            query:function(){
                var that=this;
                console.log("11")
                if(that.queryCompanyId==""){
                    var newList=[];
                    for(var i=0;i<r.length;i++){
                        $.wyui.postMethod(urlConfig.capital.bankCard.getBankCardList, {"fkCompanyId":r[i].companyId}, function (r) {
                            if(r.length>0){
                                for(var a=0;a<r.length;a++){
                                    newList.push(r[a])
                                }
                            }
                        },true);
                    }
                    that.list=newList;
                    that.allPrice=that.getCount(that.list,"nowMoney")
                }else{
                    $.wyui.postMethod(urlConfig.capital.bankCard.getBankCardList, {"fkCompanyId":that.queryCompanyId,"accountApplication":that.accountApplication,"useStatus":that.useStatus}, function (r) {
                        that.list=r;
                        that.allPrice=that.getCount(that.list,"nowMoney")
                    });
                }

            },
            getCount:function (arr,key) {
                var number=0;
                for (var i = arr.length - 1; i >= 0; i--) {
                    number+=(arr[i][key]?arr[i][key]:0)

                }
                return number;
            },
            //  添加账户
            addAccount: function () {

                var that = this;
                url = "/page/reportForm/capital/addAccount.html";
                top.$.dialog({
                    content: 'url:'+url,
                    title: '新增银行账户',
                    width: 750,
                    height: 200,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            editAccount:function (item) {
                var that = this;
                url = "/page/reportForm/capital/editAccount.html?id="+item.id;
                top.$.dialog({
                    content: 'url:'+url,
                    title: '编辑银行账户',
                    width: 750,
                    height: 100,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            //  删除账户
            deleteAccount: function () {
                if (confirm("确认删除吗？")) {
                    alert("删除成功！");
                }
                return false;
            }
        },

        mounted: function () {
            var that = this;

            if($.wyui.page.urlParams.companyId){
                $.wyui.postMethod(urlConfig.system.user.getCompanyIdsByUserId, {"userId":getCurrentUser().id}, function (r) {
                    that.companyList=r;
                });
                that.companyId=$.wyui.page.urlParams.companyId;
                $.wyui.postMethod(urlConfig.capital.bankCard.getBankCardList, {"fkCompanyId":that.companyId}, function (r) {
                    that.list=r;
                    that.allPrice=that.getCount(that.list,"nowMoney")
                });
            }else{
                that.companyId=getCurrentUser().companyId;
                //应收账款专员，孙强可看见所有公司的
                if(getCurrentUser().roleName=="应收账款专员"||getCurrentUser().name=="孙强"||getCurrentUser().name=="靳悦双"||getCurrentUser().name=="曹国玉"||getCurrentUser().name=="谈小中"||getCurrentUser().name=="要晋龙"||getCurrentUser().name=="林恩智"){
                    $.wyui.postMethod(urlConfig.system.company.getCompanyList, {}, function (r) {
                        for(var i=0;i<r.length;i++){
                            if(r[i].name=="滚滚向前集团"){
                                r.splice(i, 1);
                            }
                        }
                        console.log(r)
                        for(var i=0;i<r.length;i++){
                            r[i].companyId=r[i].id
                            r[i].companyName=r[i].name
                        }
                        var newList=[];
                        $.wyui.postMethod(urlConfig.capital.bankCard.getBankCardList, {"fkCompanyId":r[0].companyId}, function (r) {
                            console.log(r);
                            if(r.length>0){
                                for(var a=0;a<r.length;a++){
                                    newList.push(r[a])
                                }
                            }
                        },true);
                        that.list=newList;
                        that.allPrice=that.getCount(that.list,"nowMoney")
                        that.companyList=r;
                        that.queryCompanyId=r[0].companyId
                    },true);
                }else{
                    $.wyui.postMethod(urlConfig.system.user.getCompanyIdsByUserId, {"userId":getCurrentUser().id}, function (r) {
                        that.companyList=r;
                        var newList=[];
                        for(var i=0;i<r.length;i++){

                            $.wyui.postMethod(urlConfig.capital.bankCard.getBankCardList, {"fkCompanyId":r[i].companyId}, function (r) {
                                console.log(r);
                                if(r.length>0){
                                    for(var a=0;a<r.length;a++){
                                        newList.push(r[a])
                                    }
                                }
                            },true);
                        }
                        that.list=newList;

                        that.allPrice=that.getCount(that.list,"nowMoney")
                    });
                }

            }



            $(".select2").select2();
            $(".select2").select2().on('select2:select', function (e) {
                var clazz = $(this).attr("class");
                if (clazz.indexOf("accountApplication") > -1)
                    that.accountApplication = $(this).val();
                else if (clazz.indexOf("useStatus") > -1)
                    that.useStatus = $(this).val();
                else if (clazz.indexOf("queryCompanyId") > -1)
                    that.queryCompanyId = $(this).val();

            });
            //  内容处理
            var formReport = $.wyui.page.urlParams.formReport;
            if (formReport){
                that.formReport = $.wyui.page.urlParams.formReport;
            }


        }
    });

</script>

</body>
</html>